<template>
	<div class="view">
		<Table 
			border 
			:height="data.height"
			:loading="data.isLoading" 
			:columns="columns" 
			:data="data.data">
		</Table>
		<div class="pagePanel" v-show="data.data.length > 0">
			<Page
			show-sizer 
			show-total
			show-elevator
			placement="top"
			:total="data.page.totalSize" 
			:page-size="data.page.pagesize" 
			:current="data.page.currentPage + 1" 
			:page-size-opts="[20, 40, 60, 80, 100]"
			@on-change="changePage"
			@on-page-size-change="changePageSize"></Page>
		</div>
	</div>
</template>

<script>
import {formatTimestamp} from '@/common/js/date_util.js'
export default {
	props: ['data'],
	data () {
		return {
			saveColumns: [
				{
					title: '客存订单号',
					key: 'depositCode',
					width: 150,
					align: 'center'
				},
				{
					title: '手机号',
					key: 'phoneNum',
					width: 120,
					align: 'center'
				},
				{
					title: '姓名',
					key: 'name',
					width: 100,
					align: 'center'
				},
				// {
				// 	title: '是否会员',
				// 	key: 'isMember',
				// 	width: 100,
				// 	align: 'center',
				// 	render: (h, params) => {
				// 		return params.row.isMember == 0? '非会员' : '会员'
				// 	}
				// },
				{
					title: '存入时间',
					key: 'createTime',
					width: 160,
					align: 'center',
					render: (h, params) => {
						return formatTimestamp(params.row.createTime / 1000);
					}
				},
				{
					title: '操作人',
					key: 'accountName',
					width: 100,
					align: 'center'
				},
				{
					title: '状态',
					key: 'status',
					width: 100,
					align: 'center',
					render: (h, params) => {
						let status = params.row.status;
						let text = '';
						if (status == 0) {
							text = '寄存中';
						} else if (status == 1) {
							text = '过期';
						} else if (status == 2) {
							text = '超时';
						} else if (status == 3) {
							text = '已取出';
						}
						return text;
					}
				},
				{
					title: '备注',
					key: 'remark',
					width: 150,
					align: 'center'
				},
				{
					title: '操作',
					key: 'action',
					width: 250,
					align: 'center',
					render: (h, params) => {
						let detail = h('Button', {
							props: {
								type: 'primary'
							},
							style: {
								marginRight: '.1rem'
							},
							on: {
								click: () => {
									this.$router.push({
										name: 'XSaveDetailPage',
										params: {detail: params.row}
									})
								}
							}
						}, '查看详情');
						let upStorage = h('Button', {
							props: {
								type: 'primary'
							},
							on: {
								click: () => {
									this.$emit('on-action', params)
								}
							}
						}, '取出客存');
						return h('div', [detail, upStorage]);
					}
				},
			],
			detailColumns: [
				{
					title: '物品名称',
					key: 'product',
					align: 'center'
				},
				{
					title: '物品单位',
					key: 'unit',
					align: 'center'
				},
				{
					title: '物品数量',
					key: 'number',
					align: 'center'
				},
				{
					title: '状态',
					key: 'status',
					align: 'center',
					render: (h, params) => {
						let status = params.row.status;
						let text = ''
						if (status == 0) {
							text = '寄存中';
						} else if (status == 1) {
							text = '过期';
						} else if (status == 2) {
							text = '超时';
						} else if (status == 3) {
							text = '取出';
						}
						return text;
					}
				},
			]
		}
	},
	computed: {
		columns() {
			let data = this.data;
			let columns;
			if (data.listType == 'save') {
				columns = this.saveColumns;
			} else if (data.listType == 'detail') {
				columns = this.detailColumns;
			}
			return columns;
		}
	},
	methods: {
		changePage(page) {
			this.$emit('on-change-page', this.data.listType, page);
		},
		changePageSize(pageSize) {
			this.$emit('on-change-pageSize', this.data.listType, pageSize);
		}
	}
}
</script>

<style scoped lang="less">
.view {
	.pagePanel {
		margin-top: 20px;
		text-align: center;
	}
}
</style>